<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>微商城</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=request.getContextPath() %>/resources/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=request.getContextPath() %>/resources/css/shop.css">
</head>
<body>
    <!-- 图片轮播 -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="<%=request.getContextPath() %>/resources/images/slide1.jpg" alt="First slide">
            </div>
            <div class="item">
                <img src="<%=request.getContextPath() %>/resources/images/slide2.jpg" alt="Second slide">
            </div>
            <div class="item">
                <img src="<%=request.getContextPath() %>/resources/images/slide3.jpg" alt="Third slide">
            </div>
        </div>
        <a href="#myCarousel" data-slide="prev" class="carousel-control left"> ‹ </a>
        <a href="#myCarousel" data-slide="next" class="carousel-control right"> › </a>
    </div>
    <!--  -->
    <table class="table center">
        <tr class="active">
            <td>
                <button class="btn btn-info btn-my">
                    <span class="glyphicon glyphicon-heart"></span>
                </button>
                <p><small>我的收藏</small></p>
            </td>
            <td>
                <a href="userOrders">
                    <button class="btn btn-danger btn-my">
                        <span class="glyphicon glyphicon-list-alt"></span>
                    </button>
                    <p><small>我的订单</small></p>
                </a>
            </td>
            <td>
                <button class="btn btn-success btn-my">
                    <span class="glyphicon glyphicon-headphones"></span>
                </button>
                <p><small>客服中心</small></p>
            </td>
            <td>
                <button class="btn btn-warning btn-my">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
                <p><small>商品搜索</small></p>
            </td>
        </tr>
    </table>
    <!-- 商品列表 笔记本 -->
    <div class="container-fluid">
        <img src="<%=request.getContextPath() %>/resources/images/index-2.jpg" class="img-responsive" alt="">
    </div>
    <br>
    <div class="container-fluid">
        <div class="goodslist row">
            <c:forEach items="${bjb}" var="goods">
                <div class="col-xs-6 col-md-3">
                    <a href="${goods.id}/single">
                        <div class="thumbnail">
                            <img class="img-responsive" src="<%=request.getContextPath() %>/resources/images/goodsImages/${goods.image}" alt=""/>
                            <div class="caption">
                                <p class="textflow">${goods.name}</p>
                                <p class="price">￥${goods.price}</p>
                            </div>
                        </div>
                    </a>
                </div>
            </c:forEach>
        </div>
    </div>
    <!-- 商品列表 台式机 -->
    <div class="container-fluid">
        <img src="<%=request.getContextPath() %>/resources/images/index-1.jpg" class="img-responsive" alt="">
    </div>
    <br>
    <div class="container-fluid">
        <div class="goodslist row">
            <c:forEach items="${tsj}" var="goods">
                <div class="col-xs-6 col-md-3">
                    <a href="${goods.id}/single">
                        <div class="thumbnail">
                            <img class="img-responsive" src="<%=request.getContextPath() %>/resources/images/goodsImages/${goods.image}" alt=""/>
                            <div class="caption">
                                <p class="textflow">${goods.name}</p>
                                <p class="price">￥${goods.price}</p>
                            </div>
                        </div>
                    </a>
                </div>
            </c:forEach>
        </div>
    </div>
    <!-- 商品列表 平板电脑 -->
    <div class="container-fluid">
        <img src="<%=request.getContextPath() %>/resources/images/index-3.jpg" class="img-responsive" alt="">
    </div>
    <br>
    <div class="container-fluid">
        <div class="goodslist row">
            <c:forEach items="${pb}" var="goods">
                <div class="col-xs-6 col-md-3">
                    <a href="${goods.id}/single">
                        <div class="thumbnail">
                            <img class="img-responsive" src="<%=request.getContextPath() %>/resources/images/goodsImages/${goods.image}" alt=""/>
                            <div class="caption">
                                <p class="textflow">${goods.name}</p>
                                <p class="price">￥${goods.price}</p>
                            </div>
                        </div>
                    </a>
                </div>
            </c:forEach>
        </div>
    </div>

    <!-- 底部菜单 -->
    <nav id="indexnav" class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="btn-group btn-group-justified">
            <a class="btn btn-inverse" href="index">
                <span class="glyphicon glyphicon-home"></span>
                <p>首页</p>
            </a>
            <a class="btn btn-inverse" href="usercenter">
                <span class="glyphicon glyphicon-user"></span>
                <p>个人中心</p>
            </a>
            <a class="btn btn-inverse" href="cart">
                <span class="glyphicon glyphicon-shopping-cart"></span>
                <p>购物车</p>
            </a>
            <a class="btn btn-inverse" href="all">
                <span class="glyphicon glyphicon-th-large"></span>
                <p>所有商品</p>
            </a>
            <a class="btn btn-inverse" href="#">
                <span class="glyphicon glyphicon-leaf"></span>
                <p>发现</p>
            </a>
        </div>
    </nav>
<script src="<%=request.getContextPath() %>/resources/js/jquery-1.11.2.min.js"></script>
<script src="<%=request.getContextPath() %>/resources/js/bootstrap.min.js"></script>
</body>
</html>